<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" placeholder="请输入数字" id="tex1">
    <select name="" id="sel">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" placeholder="请输入数字" id="tex2">
    <input type="button" value="计算" id="btn">
    <p id="p"></p>
</body>
<script>
    var sel = document.getElementById('sel');
    var btn = document.getElementById('btn');
    function calculate(n1, n2) {//定义函数
        // var sel = document.getElementById('sel');
        var all = '';
        n1 = n1 * 1;
        n2 = n2 * 1;
        if(sel.value == '+'){
            var sum = (n1 + n2);
        }
        if(sel.value == '-'){
            var sum = (n1 - n2);
        }
        if(sel.value == '*'){
            var sum = (n1 * n2);
        }
        if(sel.value == '/'){
            var sum = (n1 / n2);
        }
        all = sum;
        // var sum = (n1 + n2);
        // var sub = n1 - n2;
        // var mul = n1 * n2;
        // var rem = n1 / n2;
        // all = '加法：' + sum + '' + '<br>' + '减法：' + sub + '' + '<br>' + '乘法：' + mul + '' + '<br>' + '除法：' + rem;//用拼接的方式，将四个算法值呈现;
        return all;
    }

    btn.onclick = function () {
        var tex1 = document.getElementById('tex1').value;
        var tex2 = document.getElementById('tex2').value;
        var p = document.getElementById('p');
        var a = calculate(tex1, tex2);
        p.innerHTML = a;

    }
</script>

</html>